<template>
  <div style="padding: 15px">
    <i class="iconfont icon-jiantou-copy" @click="back()"></i>
     <div class="header">
        <h1>账号登录</h1>
        <span class="sapn-weight"
          >登录即表示同意<span class="span-black">"用户协议"</span>和<span
            class="span-black"
            >"隐私政策"</span
          ></span
        >
      </div>
    <div class="login-div">
      <div>
        <input type="text" v-model="from.username" placeholder="用户名" />
      </div>
      <div>
        <input type="password" v-model="from.password" placeholder="密码" />
        <span>找回密码</span>
      </div>
      <button :disabled="isDisabled" @click="login">登录</button>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      from: {},
    };
  },
  computed: {
    isDisabled() {
      return !(this.from.username && this.from.password);
    },
  },
  methods: {
    ...mapActions("users", ["getLoginList"]),
    back() {
      this.$router.back();
    },
    async login() {
      await this.getLoginList(this.from);
      this.$router.back();
    },
  },
};
</script>

<style scoped>
.header {
  display: flex;
  flex-direction: column;
}

.sapn-weight {
  color: #b3b3b3;
}

.span-black {
  color: #757474;
}

.login-div div input {
  width: 100%;
  height: 45px;
  border: 0;
  outline: none;
  font-size: 20px;
}

.login-div div input::-webkit-input-placeholder {
  color: #ccc;
}

.login-div {
  margin-top: 35px;
}

.login-div div {
  border-bottom: 1px solid #ccc;
  position: relative;
}

.login-div button {
  width: 100%;
  height: 50px;
  margin-top: 20px;
  border: 0;
  background-color: #ee1a1a;
  color: #fff;
  font-size: 20px;
  border-radius: 5px;
}

.login-div div span {
  position: absolute;
  right: 0;
  top: 17px;
  font-size: 13px;
}

.login-div button[disabled] {
  opacity: 0.5;
}
</style>